<template>
	<a-space class="contract-bill-information" :size="16" direction="vertical" style="width: 100%">
		<a-space v-for="(item, index) in tableData" :key="item" :size="16" direction="vertical" style="width: 100%">
			<div class="d-module-title">
				<b>{{ item.name }}</b>
			</div>

			<!-- <vxe-table stripe align="left" :row-config="{isHover: true}" show-overflow :data="item.bills" :expand-config="{showIcon: false}" width="100%">
				<vxe-column title="状态" :width="100">
					<template #default="{row}">
						<a-tag :color="row.billStatus == 1 ? 'error' : 'processing'">{{ row.billStatus == 1 ? (row.notOccurredMoney > 0 ? '待收' : '待付') : '已结清' }}</a-tag>
					</template>
				</vxe-column>
				<vxe-column title="期数" align="center" :width="80">
					<template #default="{row}">第{{ row.num }}期</template>
				</vxe-column>
				<vxe-column title="账单周期" align="center" :width="200">
					<template #default="{row}">{{ row.beginDate }}至{{ row.endDate }}</template>
				</vxe-column>
				<vxe-column title="应收(付)/已收(付)" align="right">
					<template #default="{row}">{{ row.totalAmount }}元/{{ row.occurredMoney }}元</template>
				</vxe-column>
				<vxe-column title="待收(付)" align="right">
					<template #default="{row}">{{ row.notOccurredMoney }}元</template>
				</vxe-column>
				<vxe-column title="应收(付)日期" align="center">
					<template #default="{row}">{{ row.billDate }}</template>
				</vxe-column>
				<vxe-column type="expand" title="操作" align="center">
					<template #content="{row}">123</template>
				</vxe-column>
			</vxe-table> -->

			<a-table :columns="columns" size="middle" :data-source="item.bills" :pagination="false" :scroll="{x: '100%'}" :show-expand-column="false" expand-row-by-click>
				<template #bodyCell="{column, text, record}">
					<template v-if="column.dataIndex === 'billStatus'">
						<a-tag v-if="text === 9">已作废</a-tag>
						<template v-else>
							<a-tag v-if="text === 1" :color="record.notOccurredMoney < 0 ? 'error' : 'processing'">
								{{ record.notOccurredMoney > 0 ? '待收款' : '待付款' }}
							</a-tag>
							<a-tag v-else color="success">已结清</a-tag>
						</template>
					</template>
					<template v-if="column.dataIndex === 'num'">第{{ text }}期</template>
					<template v-if="column.key === 'cycle'">{{ text.beginDate }}至{{ text.endDate }}</template>
					<template v-if="column.key === 'income'">{{ text.totalAmount }}元/{{ text.occurredMoney }}元</template>
					<template v-if="column.dataIndex === 'notOccurredMoney'">{{ text }}元</template>
					<template v-if="column.key === 'action'">
						<template v-if="isHandle">
							<a v-if="text.billStatus == 1 && hasPermissions(['mk_finance_contract-bill_handel'])" @click.stop="openBill(text.id)">处理</a>
							<a v-else>明细</a>
						</template>
						<template v-else>-</template>
					</template>
				</template>
				<template #expandedRowRender="{record}">
					<a-descriptions bordered size="small" :labelStyle="{width: '150px', textAlign: 'center'}">
						<a-descriptions-item label="账单明细" :span="3">
							<!-- direction="vertical" -->
							<template  v-for="(item, index) in record.finances" :key="item.id">
								<a-row :gutter="16">
									<a-col :span="6">{{ item.feeSubjectName }}</a-col>

									<a-col :span="7">{{ item.feeDirection === 1 ? '应收/已收' : '应付/已付' }}：{{ item.amount + '/' + item.occurredMoney }}</a-col>
									<a-col :span="4">{{ item.feeDirection === 1 ? '待收' : '待付' }}：{{ item.notOccurredMoney }}</a-col>

									<a-col :span="7">
										<div class="text-right">{{ item.beginDate }}至{{ item.endDate }}</div>
									</a-col>
								</a-row>
								<a-divider v-if="index + 1 < record.finances.length" style="margin: 8px 0" />
							</template>
						</a-descriptions-item>
						<a-descriptions-item label="支付记录">
							<!-- direction="vertical" -->
							<template  v-for="(item, index) in record.billRecords" :key="item.id">
								<a-row :gutter="16">
									<a-col :span="6">{{ item.practicalTime }}</a-col>
									<a-col :span="4">
										{{ item.paymentMethodValue || '' }}
									</a-col>
									<a-col :span="3">{{ item.totalMoney }}元</a-col>
									<a-col :span="6">{{ item.comment || '' }}</a-col>
									<a-col :span="5">{{ item.auditTime }} {{ billAuditStatus[item.auditStatus] }}</a-col>
								</a-row>
								<a-divider v-if="index + 1 < record.billRecords.length" style="margin: 8px 0" />
							</template>
						</a-descriptions-item>
					</a-descriptions>
				</template>
			</a-table>
		</a-space>
	</a-space>
	<!--处理-->
	<bill-handle-dialog v-model:visible="showBill" :id="billId" @close="emit('bill')" />
</template>
<script setup lang="ts">
	import {computed, PropType, watch, ref} from 'vue'
	import BillHandleDialog from '@/components/finance/dialog/bill-handle-dialog.vue'
	import {useStore} from '@/store/index'

	const hasPermissions = useStore().hasPermissions

	interface dataProps {
		[key: string | number]: any
	}

	const props = defineProps({
		dataSource: {
			type: Array as PropType<dataProps[]>,
			required: true
		},
		isHandle: {
			type: Boolean,
			default: false
		}
	})
	const tableData = computed(() => {
		let tableData = props.dataSource
		tableData.forEach((items: any) => {
			items.bills.forEach((item: any, index: number) => {
				item.key = index
			})
		})
		return tableData
	})

	const columns = [
		{title: '状态', dataIndex: 'billStatus', width: 100, align: 'center'},
		{title: '期数', dataIndex: 'num', width: 80, align: 'center', ellipsis: true},
		{title: '账单周期', key: 'cycle', width: 200, align: 'left', ellipsis: true},
		{title: '应收(付)/已收(付)', key: 'income', align: 'right', ellipsis: true},
		{title: '待收(付)', dataIndex: 'notOccurredMoney', align: 'right', ellipsis: true},
		{title: '应收(付)日期', dataIndex: 'billDate', align: 'center', ellipsis: true},
		{title: '操作', key: 'action', align: 'center'}
	]

	const billDetailStatus: {
		[key: string | number]: any
	} = {
		'1': '已收',
		'2': '已付',
		'3': '应收',
		'4': '应付',
		'5': '已驳回'
	}
	const billAuditStatus: {
		[key: string | number]: any
	} = {
		1: '待审核',
		2: '审核通过',
		3: '驳回'
	}

	// 处理
	const showBill = ref(false)
	const billId = ref('')
	const openBill = (id: string) => {
		billId.value = id
		showBill.value = true
	}
	const emit = defineEmits(['bill'])
</script>
<style lang="less">
	.contract-bill-information {
		tr.ant-table-expanded-row > td {
			background: #fff;
		}
	}
</style>
